<template>
  <div class='myAddress'>
    <my-header :title='title' :showLeft='true' />
    <!-- 地址栏 -->
    <div class="address-wrap">
      <div class="address-list" v-for="(item,index) in allAddress" :key="index">
        <div class="address-card-select">
          <i class="fa fa-check-circle" v-if="selectIndex===index "></i>
        </div>
        <ul>
          <li @click="selectAddress(item,index)">
            <div class="user-header">
              <span class="name">{{item.name}}</span>
              <span class="gender">{{item.sex}}</span>
              <span class="phone">{{item.phone}}</span>
            </div>
            <div class="address-info">
              <span class="tags" v-if="item.tags">{{item.tags}}</span>
              <span class="address-text">{{item.address}}</span>
            </div>
            <div class="icon">
              <i class="fa fa-edit" @click.stop="editAddress(item)"></i>
              <i class="fa fa-close" @click.stop="handleDelete(item,index)"></i>
            </div>
          </li>
        </ul>

      </div>
    </div>

    <!-- 底部 -->
    <div class='address-bottom' @click='addAddress'>
      <i class='fa fa-plus-circle'></i>
      <span>新增收货地址</span>
    </div>
  </div>
</template>

<script>
import MyHeader from '@/components/Header/Header'

export default {
  name: 'MyAddress',
  components: {
    MyHeader
  },
  data() {
    return {
      title: '我的地址',
      allAddress: [],
      selectIndex: 0
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getData()
    })
  },
  methods: {
    addAddress() {
      this.$router.push({
        name: 'addAddress',
        params: {
          title: '添加地址',
          addressInfo: {
            name: '',
            sex: '',
            phone: '',
            address: '',
            bottom: '',
            tag: ''
          }
        }
      })
    },
    getData() {
      this.$http(`/api/user/user_info/${sessionStorage.getItem('ele_login')}`).then(res => {
        this.allAddress = res.data.myAddress
      })
    },
    editAddress(val) {
      this.$router.push({
        name: 'addAddress',
        params: {
          title: '编辑地址',
          addressInfo: val,
          tag: ''
        }
      })
    },
    handleDelete(val, index) {
      this.$http
        .delete(`/api/user/address/${sessionStorage.ele_login}/${val._id}`)
        .then(res => {
          this.allAddress.splice(index, 1)
        })
    },
    selectAddress(item, index) {
      this.selectIndex = index
      this.$router.push('/settlement')
      this.$store.dispatch('setUserInfo', item)
    }
  }
}
</script>

<style lang='less' scoped>
.myAddress {
  .address-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 49px;
    line-height: 49px;
    background-color: #fff;
    text-align: center;
    color: skyblue;
    i {
      margin-right: 5px;
      font-size: 20px;
    }
  }
  .address-wrap {
    .address-list {
      display: flex;
      position: relative;
      background-color: #fff;
      .address-card-select {
        display: flex;
        width: 25px;
        height: 100%;
        padding: 20px 0 0 5px;
        box-sizing: border-box;
        font-size: 30px;
        color: green;
      }
      ul {
        width: 100%;
        flex: 1;
        li {
          position: relative;
          border-bottom: 1px solid #ccc;
          padding: 15px 10px 40px;
          .user-header {
            .name,
            .gender {
              font-weight: 700;
              font-size: 18px;
            }
            .phone {
              margin-left: 15px;
            }
          }
          .address-info {
            margin-top: 5px;
            .tags {
              border: 1px solid red;
              font-size: 14px;
            }
            .address-text {
              font-size: 14px;
              color: #666;
              margin-left: 8px;
            }
          }
          .icon {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            i {
              margin: 0 5px;
              font-size: 20px;
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>
